import { nextTick } from 'vue'
import * as echarts from 'echarts'
import { onBeforeUnmount } from 'vue'
import { onMounted } from 'vue'
import { riskCount } from '@/api/spotCheck/spotCheck'

/**
 * 社会组织风险预警分类
 */
export function useWarningCategoryChart() {
  let myChart3: any
  let myChart2: any
  let myChart1: any
  onMounted(() => {
    nextTick(() => {
      createWaringCharts()
    })
  })

  onBeforeUnmount(() => {
    window.addEventListener('resize', resize)
  })

  function createWaringCharts() {
    riskCount().then((res) => {
      const v1 = res.data.red || 0
      const v2 = res.data.org || 0
      const v3 = res.data.gre || 0
      // const v1 = 18
      // const v2 = 42
      // const v3 = 78
      myChart1 = echarts.init(document.getElementById('echarts1'))

      const option1 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#e4393c',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v1,
                name: '红色（严重）',
                label: {
                  normal: {
                    formatter: v1 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              }
            ]
          }
        ]
      }

      myChart3 = echarts.init(document.getElementById('echarts3'))
      // const v1 = 0
      // const v2 = 80
      // const v3 = 418
      const option2 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: 'orange',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v2,
                name: '橙色（一般）',
                label: {
                  normal: {
                    formatter: v2 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              }
            ]
          }
        ]
      }

      myChart2 = echarts.init(document.getElementById('echarts2'))
      const option3 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#006CD8',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v3,
                name: '橙色（一般）',
                label: {
                  normal: {
                    formatter: v3 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              }
            ]
          }
        ]
      }

      nextTick(() => {
        window.addEventListener('resize', resize)
        myChart1.setOption(option1)
        myChart2.setOption(option2)
        myChart3.setOption(option3)
      })
    })
  }

  function resize() {
    setTimeout(() => {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
    }, 200)
  }
}
